<template>
  <div class="box">
    <van-radio-group v-model="radio">
      <van-radio v-for="item in list" :key="item" :name="item*100" checked-color="#F6CD48">
        <div class="checkbox">
          <div>{{item}}元</div>
          <div>{{item*10}}巢果</div>
        </div>
      </van-radio>
      <van-radio name="输入" checked-color="#F6CD48">
        <div class="checkbox">
          <input type="nunber" placeholder="请输入金额" v-model="price" />
          <div>{{price*10}}巢果</div>
        </div>
      </van-radio>
    </van-radio-group>
    <div style="color:#999;padding:0.2667rem">注意：最低1元起充，1元 = 10巢果。</div>
    <button @click="pay()">立即充值</button>
  </div>
</template>

<script>
import { ajax, login } from "@/js/api";
import { Dialog, Toast } from "vant";
import wx from 'weixin-js-sdk';
export default {
  name: "recharge",
  data() {
    return {
      list: [5, 10, 20, 50],
      radio: 5,
      price: "",
      userId: this.$store.state.userId
    };
  },
  mounted() {
    this.jsddk();
  },
  methods: {
    pay() {
      let amount = this.radio;
      if (amount == "输入") {
        if (this.price == "") {
          Toast("请输入金额");
          return;
        }
        amount = this.price * 100;
      }
      if (amount < 100) {
        Toast("金额不能低于1元");
        return;
      }
      let that = this,
        data = {
          payment: "微信支付",
          source: "H5端",
          amount: amount,
          appid: this.$store.state.appid
        };

      ajax(
        "user/rechargePoints/" + this.$store.state.userId,
        data,
        "post",
        res => {
          if (res.data.code == 200) {
            wx.chooseWXPay({
              timestamp: res.data.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: res.data.data.nonceStr, // 支付签名随机串，不长于 32 位
              package: res.data.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              signType: res.data.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: res.data.data.paySign, // 支付签名
              success: function(res) {
                // 支付成功后的回调函数
                Toast.success("充值成功");
              },
              fail(rej){
                  Toast.fail('充值失败');
              }
            });
          }
        }
      );
    },
    jsddk() {
      let data = {
        appid: this.$store.state.appid,
        url:location.href
      };
      ajax("weixin/jssdk/config", data, "post", res => {
        console.log(res);
        if (res.data.code == 200) {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
          });
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
  /* padding: 0.2667rem 0 0; */
  margin-top: 0.2667rem;
}
.checkbox {
  display: flex;
  justify-content: space-between;
  width: 8.6667rem;
}
.van-radio {
  padding: 0.4rem 0.2667rem;
  border-bottom: 1px solid #f2f2f2;
  background: #fff;
}
button {
  display: block;
  width: 9.4667rem;
  height: 1.1733rem;
  margin: 0.6667rem auto 0;
  background: rgba(246, 205, 72, 1);
  box-shadow: 0rem 0.0267rem 0.1067rem 0rem rgba(221, 211, 202, 0.6);
  border-radius: 0.5867rem;
}
input {
  border: 0;
}
</style>
